<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="javascript:void(0);">添加客户</a></el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片 -->
        <el-card>
            <el-card class="AddTag-box-card">
                <h2 class="Regi-title">添加客户</h2>
                <el-form :model="AddCustomerFrom" label-width="100px" size="medium" :rules="CustomerFromRules" ref="CustomerFromRef">
                    <el-form-item label="客户名称 :">
                        <el-input v-model="AddCustomerFrom.cname" placeholder="请输入客户名"> </el-input>
                    </el-form-item>

                    <el-form-item label="公司地址 :">
                        <el-input v-model="AddCustomerFrom.address" placeholder="请输入公司地址"> </el-input>
                    </el-form-item>

                    <el-form-item label="联系人姓名 :">
                        <el-input v-model="AddCustomerFrom.uname" placeholder="请输入联系人姓名"> </el-input>
                    </el-form-item>

                    <el-form-item label="联系人电话 :" prop="phone">
                        <el-input v-model="AddCustomerFrom.phone" placeholder="请输入联系人手机号"> </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="AddCustomer" style="width:200px;">添加</el-button>
                    </el-form-item>
                </el-form>
            </el-card>
        </el-card>
    </div>
</template>

<script>
import { add_customer_post } from '../axios_api/api'
import { if_phone } from '../../config'
export default {
    data() {
        return {
            AddCustomerFrom: {
                cname: '',
                address: '',
                uname: '',
                phone: '',
            },
        }
    },
    computed: {
        CustomerFromRules() {
            // 验证手机号
            let phone = (rule, value, callback) => {
							// 调用config.js文件中的函数
                if_phone(rule, value, callback);
            };
            return {
                // 绑定验证
                phone: [
                    { validator: phone, trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        AddCustomer() {
            this.$refs.CustomerFromRef.validate(valid => {
							if (!valid) return
                add_customer_post(this.AddCustomerFrom).then(resp => {
										this.$message.success(resp.message)
										this.$router.push('/customer_info')
                    console.log(resp)
                })
            })
        },
    }
}
</script>

<style>
</style>